<template>
  <div id="house">
    <!-- 头部 -->
    <div
      class="topnav"
      style="
        height: 60px;
        line-height: 60px;
        background-color: white;
        margin-bottom: 2px;
        display: flex;
        border-bottom: 1px dashed black;
        padding-bottom: 22px;
      "
    >
      <div style="width: 300px; margin-left: 92px; margin-top: 11px">
        <i
          class="icon iconfont icon-shouye"
          style="float: left; font-size: 60px; margin-top: -4px"
        ></i>
        <!-- <img
          src="@/assets/logo.png"
          alt=""
          style="width: 40px; position: relative; top: 10px; left: 20px"
        /> -->
        <span style="margin-left: 13px; font-size: 24px">租房信息系统</span>
      </div>
      <div
        style="
          flex: 1;
          text-align: right;
          padding-right: 20px;
          margin-right: 72px;
          margin-top: 15px;
        "
      >
        <el-dropdown size="medium">
          <span class="el-dropdown-link" style="cursor: pointer">
            {{ admin.nikeName }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="margin-top: -5px">
            <el-dropdown-item
              ><div style="width: 100px; text-align: center" @click="logout">
                退出
              </div></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 头部结束 -->
    <!-- 侧边和主体 -->
    <div class="main">
      <!-- 侧边导航栏 -->
      <div class="main-left">
        <div class="manu">
          <ul>
            <li><div @click="changeNav(1)">用户管理</div></li>
            <li><div @click="changeNav(2)">房源管理</div></li>
            <li><div @click="changeNav(3)">帖子管理</div></li>
            <li><div @click="changeNav(4)">用户评论管理</div></li>
            <li><div @click="changeNav(5)">房源评论管理</div></li>
          </ul>
        </div>
      </div>
      <!-- 侧边导航栏结束 -->
      <!-- 主体数据 -->
      <!-- width: 0; 可以限制容器的宽度，不被子元素无限撑开-->
      <div style="flex: 1; width: 0; background-color: white; padding: 10px">
        <div class="main-right" v-if="Index == 1">
          <usermanage></usermanage>
        </div>
        <div class="main-right" v-if="Index == 2">
          <housemanage></housemanage>
        </div>
        <div class="main-right" v-if="Index == 3">
          <postmanage></postmanage>
        </div>
        <div class="main-right" v-if="Index == 4">
          <usercommanage></usercommanage>
        </div>
        <div class="main-right" v-if="Index == 5">
          <housecommanage></housecommanage>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import usermanage from "../manage/usermanage.vue";
import usercommanage from "../manage/usercommanage.vue";
import postmanage from "../manage/postmanage.vue";
import housemanage from "../manage/housemanage.vue";
import housecommanage from "../manage/housecommanage.vue";
export default {
  name: "HelloWorld",
  components: {
    usermanage,
    usercommanage,
    postmanage,
    housemanage,
    housecommanage,
  },
  data() {
    return {
      admin: localStorage.getItem("admin")
        ? JSON.parse(localStorage.getItem("admin"))
        : {},
      Index: 1,
    };
  },
  methods: {
    logout() {
      localStorage.setItem("admin", JSON.stringify(null));
      this.$router.push("/login");
    },
    changeNav(index) {
      if (index == 1) {
        this.Index = 1;
      } else if (index == 2) {
        this.Index = 2;
      } else if (index == 3) {
        this.Index = 3;
      } else if (index == 4) {
        this.Index = 4;
      } else if (index == 5) {
        this.Index = 5;
      }
    },
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* tab开始 */
.main {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0;
  position: relative;
}
/* 左边 */
.main .main-left {
  width: 200px;
  border: 1px solid #e6e5e5;
  /* padding: 35px 0 9px; */
  background-color: #fff;
  position: absolute;
  height: 300px;
  left: -190px;
}
ul {
  position: absolute;
  width: 180px;
  left: 50%;
  margin-left: -141px;
}
.main .main-left ul li {
  width: 202px;
  height: 45px;
  position: relative;
  text-align: center;
  list-style: none;
  margin: 5px 0px;
}
.main .main-left ul li:hover {
  background-color: #8cbfcc;
}

.main .main-left ul li div {
  width: 202px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  display: inline-block;
  text-align: center;
  color: #555;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.manu {
  position: relative;
}
/* 右边 */
.main .main-right {
  box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
  padding: 30px 60px;
  background-color: #fff;
  border: 1px solid #e6e5e5;
  width: 1050px;
  position: absolute;
  margin-left: 13px;
  margin-top: -10px;
}

/* tab结束 */
</style>